<template>
	<div class="delete-confirm-content">
		<div class="warning-text">此操作将删除空间内的所有图片，且不可恢复！</div>
		<div class="info-card">
			<div class="info-item">
				<span class="label">空间名称：</span>
				<span class="value">{{ spaceName || '未知' }}</span>
			</div>
			<div class="info-item">
				<span class="label">图片数量：</span>
				<span class="value">{{ pictureCount }}张</span>
			</div>
			<div class="info-item">
				<span class="label">占用空间：</span>
				<span class="value">{{ spaceSize }}</span>
			</div>
		</div>
		<div class="confirm-text">请确认您真的要删除这个空间吗？</div>
	</div>
</template>

<script setup lang="ts">
interface Props {
	spaceName?: string
	pictureCount: number
	spaceSize: string
}

defineProps<Props>()
</script>

<style scoped lang="scss">
.delete-confirm-content {
	padding: 8px 0;

	.warning-text {
		margin-bottom: 16px;
		font-size: 14px;
		color: #ff4d4f;
	}

	.info-card {
		background: #f5f5f5;
		padding: 12px;
		border-radius: 6px;
		margin-bottom: 12px;

		.info-item {
			margin-bottom: 8px;

			&:last-child {
				margin-bottom: 0;
			}

			.label {
				font-weight: 500;
				color: #262626;
			}

			.value {
				color: #595959;
			}
		}
	}

	.confirm-text {
		font-size: 13px;
		color: #8c8c8c;
	}
}
</style>
